import { useDispatch, useSelector } from "react-redux"
import type { ROOTSTATE } from "../Store"
import { Avatar, Descriptions, Flex, type DescriptionsProps } from "antd"
import { Title } from "../components/Content/title"
import { useState } from "react"
import { Edit } from "../components/Content/edit"
import { reqUpdateUser } from "../api/userApi"
import { login } from "../Store/userSlice"


export const Home = () => {
    const user = useSelector((state: ROOTSTATE) =>  state.userStore.user )
    const dispatch = useDispatch()
    const [status,setStatus] = useState("")
    const updateFn = async (obj:object)=>{
        const {data:newUser} = await reqUpdateUser(user.username!,obj)
        dispatch(login(newUser))
        setStatus("")
    }

    const items: DescriptionsProps['items'] = [
        {
            key: '1',
            label: '用户名',
            children: user.username,
        },
        {
            key: '2',
            label: '昵称',
            children: (
                <Edit
                    label="nickname"
                    content={user.nickname!}
                    status={status === "nickname"}
                    EditFn={()=>setStatus("nickname")}
                    CloseFn={()=>setStatus("")}
                    updateFn={updateFn}
                ></Edit>
            ),
        },
        {
            key: '3',
            label: '头像',
            children: (
                <Edit
                    label="avatar"
                    content={user.avatar!}
                    status={status === "avatar"}
                    type="img"
                    EditFn={()=>setStatus("avatar")}
                    CloseFn={()=>setStatus("")}
                    updateFn={updateFn}
                ></Edit>
            ),
        }
        
    ];

    

    return (
        <Flex vertical gap={30}>
            {/* 个人页面 头部 */}
            <Title title="个人信息"></Title>
            {/* 展示个人信息区域 */}
            <Descriptions items={items} layout="vertical"/>
        </Flex>
    )
}